
<div class="mainbar" id="contentPost">
<?php
if(isset($posts)){ 
foreach ($posts as $post):?>
	<div class="article">
		<h2>
			<a class="linkTitle" href="/posts/detail/<?php echo $post['Post']['id']; ?>"><span><?php echo $post['Post']['title']; ?></span></a>
		</h2>
		<div class="clr"></div>
		<p class="infopost">
			<span class="date"><?php echo $post['Post']['created']; ?></span>
			<span>&nbsp;&bull;&nbsp;</span>
			Posted by <a href="/adminposts/profile/<?php echo $post['Post']['user_id']; ?>"><?php echo $post['Post']['username']; ?></a>
			&nbsp;|&nbsp;
			<!-- Filed under <a href="#">templates</a>, <a href="#">internet</a> -->
			with <a
				href="/posts/detail/<?php echo $post['Post']['id']; ?>#commentListID"
				class="com"><?php echo $post['Post']['numComment']?> Comments</a>
		</p>
		<img src="<?php echo $post['Post']['thumbnail']; ?>" width="201"
			height="146" alt="" class="fl" />

		<div align="justify"><?php echo $post['Post']['body']; ?></div>

		<div class="clr"></div>
		<p class="spec" align="right">
			<a href="/posts/detail/<?php echo $post['Post']['id']; ?>"
				class="rm">Read more &raquo;</a>
		</p>
	</div>
<?php endforeach;
}
?>
<div id="loading">Loading data...</div>
</div>
<!-- Sidebar -->
		<div class="sidebar">
      <?php		if(isset($sidebarList)){ 
					echo $this->element ( 'sidebar', array (
							"sidebarList" => $sidebarList 
					) );
      			}
				?>
				</div>
<!-- end Sidebar -->
<div class="clr"></div>
<script>
/*
 * ThanhLD1 - script load more data
 * This function using ajax to load more data if user scroll at bottom screen
 */
$(function(){
    var $start=10;
    var $window=$(window);
    var $loading=$('#loading');
    var $status=true;
    $window.on( 'scroll',function(eS){

    	//if not load more data (not have more data) don't load more data again
    	if($(this).scrollTop() /( $(document).height() - $(this).height()) >=0.99){
    		$status=false;	
       	}

    	//load more data when user scroll to new bottom
        if($(this).scrollTop() /( $(document).height() - $(this).height()) > 0.95 && $status ){
            $.ajax({
               type:'post',
               url:'/search/getmore',
               dataType:'html', 
               data:{start: $start},
               beforeSend:function(){
                  $status=false;
                  $loading.show();   
               },
               success:function(data){
                    if(data){
                        $('#contentPost').append(data);
                    }else{
                        $window.off(eS);
                    }
               },
               complete:function(){
                    $status=true;
                    $loading.fadeOut();
                    $start+=10; 
               },
               error:function(){
					$status=false;
               }
            });                
        }
    });
});
</script>